// 直播详情
.blive-info{
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 12px;
  img{
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin-right: 12px;
  }
  .info{
    .title{
      padding-top: 5px;
      font-size: 14px;
      margin-bottom: 10px;
      color: #333333;
    }
    .time{
      margin-bottom: 10px;
      font-size: 12px;
      color: #666666;
    }
  }
  .el-button{
    top: 50%;
    margin-top: -15px;
    right: rem(12px);
    position:absolute;
  }
}
// 本场直播概况
.survey-box{
  padding: 24px 0;
  background: #FAFBFF;
  border-radius: 4px;
  .survey-floor{
    display: flex;
    justify-content: center;
    &:first-child{
      margin-bottom: 18px;
    }
    .iconfont{
      font-size: 18px;
      margin-right: 6px;
    }
    .survey{
      width: 187px;
      padding: 11px 29px 13px 42px;
      position:relative;
      display: inline-block;
      padding: 0 29px 0 30px;
      color: #333333;
      .title{
        font-size: 14px;
        margin-bottom: 13px;
      }
      .num{
        font-family: MicrosoftYaHei-Bold;
        font-size: 20px;
        color: #333333;
      }
      &:first-child{
        padding-left: 0;
      }
      &:last-child{
        padding-right: 0;
      }
      &::after{
        content: '';
        position:absolute;
        right: 0;
        top: 50%;
        margin-top: -15px;
        width: 1px;
        height: 30px;
        background: #DDDFE6;
      }
    }
  }
}
// 目标达成
.target-box{
  padding:  0 55px 0 20px;
  display: flex;
  justify-content:space-between;
  margin-bottom: 40px;
  .target{
    position: relative;
    padding-left: 52px;
    width: 292px;
    min-height: 40px;
    .info{ //目标完成情况
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      margin-bottom: 12px;
      .title{
        width: 117px;
      }
    }
    .progress{ // 目标完成进度
      width: 240px;
      border-radius: 5px;
      height: 4px;
      overflow: hidden;
      position: relative;
      .bg{
        width: 100%;
        height: 4px;
      }
      .content{
        position:absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
        height: 4px;
        max-width: 100%;
      }
    }
    .imgBox{
      position: absolute;
      left: 0;
      text-align: center;
      line-height: 40px;
      width: 40px;
      height: 40px;
      border-radius: 50px;
    }
    &.target01{
      .imgBox{
        background: #FFE6E6;
      }
      .progress{ // 目标完成进度
        .bg{
          background: #FFE6E6;
        }
        .content{
          background-image: linear-gradient(270deg, #FF9396 0%, #FD6F70 100%);
        }
      }
    }
    &.target02{
      .imgBox{
        background: #E1FAF7;
      }
      .progress{ // 目标完成进度
        .bg{
          background: #E1FAF7;
        }
        .content{
          background-image: linear-gradient(241deg, #5DECA7 0%, #26BCB8 100%);
        }
      }
    }
    &.target03,
    &.target04{
      .imgBox{
        background: #F1E6FF;
      }
      .progress{ // 目标完成进度
        .bg{
          background: #F1E6FF;
        }
        .content{
          background-image: linear-gradient(270deg, #CF85FF 0%, #A45CFF 100%);
        }
      }
    }
    &.target05,
    &.target06{
      .imgBox{
        background: #FFF2E6;
      }
      .progress{ // 目标完成进度
        .bg{
          background: #FFF2E6;
        }
        .content{
          background-image: linear-gradient(270deg, #FFB467 0%, #F48864 100%);
        }
      }
    }
  }
}
.icon{
  &-survey01,
  &-survey02,
  &-survey03
  {
    color: #FF6B72;
  }
  &-survey04,
  &-survey05,
  &-survey06
  {
    color: #FFB170;
  }
  &-survey07,
  &-survey08,
  &-survey11,
  &-survey12
  {
    color: #A666f8;
  }
  &-survey09,
  &-survey10
  {
    color: #1acbbf;
  }
}
.achieved{
  color: #E6A23C;
  &.finish{
    color: #36850F;
  }
}
